<template>
  <view class="userinfo_container">
    <!-- 头像昵称区 -->
    <view class="top_box">
      <image src="" class="avatar"></image>
      <view class="nickname">未登录</view>
    </view>
    <!-- 面板区域 -->
    <view class="panel_list">
      <!-- 第一个面板 -->
      <view class="panel">
        <view class="panel_body">
          <view class="panel_item">
            <image class="infoicons" src="/static/my_icons/emergency_person.png"></image>
            <text>紧急联系人</text>
          </view>
          <view class="panel_item">
            <image class="infoicons" src="/static/my_icons/guardian.png"></image>
            <text>监护人</text>
          </view>
          <view class="panel_item">
            <image class="infoicons" src="/static/my_icons/ward.png"></image>
            <text>被监护人</text>
          </view>
          <view class="panel_item">
            <image class="infoicons" src="/static/my_icons/contact_customer.png"></image>
            <text>联系客服</text>
          </view>
        </view>
      </view>
      <!-- 第二个面板 -->
      <view class="panel">
        <navigator url="/subpkg/mySubpkg/userInfoDetil/userInfoDetil">
          <view class="panel_list_item">

            <view class="item_right">
              <image class="infoicons" src="/static/my_icons/base_info.png"></image>
              <text>基本信息</text>
            </view>
            <uni-icons type="arrowright" size="15"></uni-icons>

          </view>
        </navigator>
        <view class="panel_list_item">
          <view class="item_right">
            <image class="infoicons" src="/static/my_icons/management.png"></image>
            <text>设备管理</text>
          </view>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel_list_item">
          <view class="item_right">
            <image class="infoicons" src="/static/my_icons/user_greement.png"></image>
            <text>用户协议</text>
          </view>

          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel_list_item">
          <view class="item_right">
            <image class="infoicons" src="/static/my_icons/privacy_olicy.png"></image>
            <text>隐私协议</text>
          </view>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel_list_item">
          <view class="item_right">
            <image class="infoicons" src="/static/my_icons/logout.png"></image>
            <text>退出登录</text>
          </view>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "userInfo",
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .userinfo_container {
    height: 100%;


    .top_box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 50px;
      height: 350rpx;

      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 45px;
        border: 2px solid #efefee;
        box-shadow: 0 0 40rpx rgba(0, 0, 0, 0.1);

      }

      .nickname {
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        margin-top: 10px;
      }
    }
  }

  .panel_list {
    padding: 0 10px;
    position: relative;

    .panel {
      background-color: white;
      border-radius: 16px;
      margin-bottom: 40px;
      box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);



      .panel_list_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        padding: 4px 16px;
        line-height: 40px;

        .item_right {
          display: flex;
          align-items: center;

          .infoicons {
            height: 24px;
            width: 24px;
            margin-right: 10px;
          }
        }
      }

      .panel_body {
        display: flex;
        justify-content: space-around;

        .panel_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          padding: 10px 0;
          font-size: 13px;

          .infoicons {
            height: 24px;
            width: 24px;
            margin-bottom: 8px;
          }
        }
      }

      .logout {
        text-align: center;
        padding: 10px 0;
      }
    }
  }
</style>